<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>个人信息</IHeader>
    </template>
    <view class="user-info-content whov">
      <!-- 顶部logo区域 -->
      <view class="user-info-header flex flex-column items-center">
        <button class="user-info-logo" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="whov"  mode="aspectFill" :src="form.avatarUrl"> </image>
        </button>
        <view class="nameContent">
          <view class="title" style="margin-bottom: 0; margin-right: 20rpx">昵称</view>
          <input name="nickName" type="nickname" placeholder="请填写昵称" class="weui-input nickname-input" v-model="form.nickname" maxlength="20" style="flex: 1" />
        </view>
      </view>
      <!-- 登录按钮区域 -->
      <view class="user-info-body">
        <button class="user-info-btn" @click="saveFun"> 保存 </button>
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import { updateUserInfo } from '@/api/login'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useToastMsg from '@/hooks/sysMsg'
  import useUserInfoStore from '@/store/userInfo'
  import { ref } from 'vue'
  const toastMsg = useToastMsg()
  const navigatePage = useNavigatePage()
  const userInfoStore = useUserInfoStore()
  const form = ref({
    avatarUrl: '',
    nickname: '',
  })
  const onChooseAvatar = (e: any) => {
    form.value.avatarUrl = e.detail.avatarUrl
  }
  const saveFun = async () => {
    if (!form.value.nickname || !form.value.avatarUrl) {
      toastMsg.showToast('用户头像和用户昵称不能为空')
      return
    }
    userInfoStore.setUserInfo({
      ...userInfoStore.userInfo,
      nickname: form.value.nickname,
      avatarUrl: form.value.avatarUrl,
    })
    const result: any = await updateUserInfo({
      nickName: form.value.nickname,
      avatarUrl: form.value.avatarUrl,
      userId: userInfoStore.userInfo.userId,
    })
    if (result) {
      toastMsg.showToast('设置成功')
      navigatePage.redirectTo('/pages/index/index')
    }
  }
</script>

<style lang="scss" scoped>
  .user-info-content {
    background: #fff;

    box-sizing: border-box;

    // 顶部logo区域
    .user-info-header {
      padding-top: 120rpx;
      text-align: center;
      .user-info-logo {
        margin: 0 auto;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        background: linear-gradient(138deg, #f0f9f5 0%, #e6f7ef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 16rpx rgba(96, 213, 150, 0.15);
      }
    }

    // 登录按钮区域
    .user-info-body {
      padding: 40rpx 30rpx 0 30rpx;

      .user-info-btn {
        width: 100%;
        line-height: 90rpx;
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 15rpx;
        font-size: 30rpx;
        font-weight: 500;
        transition: all 0.3s;
      }
    }
  }

  .nameContent {
    margin: 40rpx 0 0 0;
    padding: 0 30rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1rpx solid #e5e6eb;
    flex-direction: row;
    align-items: center;
    .title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: 500;
    }

    .nickname-input {
      width: 100%;
      height: 80rpx;
      padding: 0 24rpx;
      font-size: 28rpx;
      border-radius: 16rpx;
      background: #f7f8fa;
      color: #222;
      box-sizing: border-box;
      outline: none;

      &::placeholder {
        color: #bcbcbc;
        font-size: 26rpx;
      }

      &:focus {
        border-color: #3b82f6;
        background: #fff;
      }
    }
  }
</style>
